<template>
  <div id="columnEchart" style="height: 45vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "columnEchart",
  data() {
    return {
      chart: null,
      options: {},
      max: "", //最大value值
      min: "", // 最小value值
      type: 0
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    this.initOptions();
    this.initCharts();
  },
  methods: {
    initOptions() {
      this.options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: [
            "生产消耗",
            "运输消耗",
            "合格量",
            "交易数据量",
            "成交量",
            "产品数据量",
            "主体数据量"
          ]
        },
        series: [
          {
            name: "种植",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: "养殖",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "生产",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "入岚",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: "批发",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [820, 832, 901, 934, 1290, 623, 1320]
          },
          {
            name: "零售",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [23, 832, 901, 934, 1290, 89, 1320]
          },
          {
            name: "配送",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [456, 56, 544, 546, 43, 767, 1320]
          },
          {
            name: "餐饮",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [820, 832, 901, 934, 435, 2248, 1320]
          }
        ]
      };
    },
    initCharts() {
      // echarts.registerMap("平潭", pingtan);
      this.chart = echarts.init(document.getElementById("columnEchart"));

      this.chart.setOption(this.options, true);
    }
  }
};
</script>
